<template>
  <div>
    <div class="mp-header" v-show="!isShow" :style="oppo">
      <router-link to="/" tag="span">
        <span class="iconfont mp-header-left">&#xe62f;</span>
      </router-link>
      <h1 mp-role="title" class="mp-header-title">故宫</h1>
    </div>
   <router-link to="/" tag="div" class="wxm" v-show="isShow">
      <span class="iconfont mp-header-left">&#xe62f;</span>
    </router-link>
  </div>
</template>

<script>
export default {
  data () {
    return {
      isShow: true,
      oppo: {
        opacity: 0
      }
    }
  },
  methods: {
    detaScroll () {
      let scrollHeight = document.documentElement.scrollTop || document.body.scrollTop
      // console.log(scrollHeight)
      if (scrollHeight > 20) {
        this.isShow = false
        this.oppo.opacity = scrollHeight / 180
      } else {
        this.isShow = true
      }
    }
  },
  mounted () {
    window.addEventListener('scroll', this.detaScroll)
  }
}
</script>

<style lang="stylus" scoped="scoped">
  .mp-header
   height: .88rem;
   z-index: 99;
   position fixed
   width 100%
   top 0rem
   left 0rem
  .mp-header
   background: #00bcd4;
  .wxm
    position absolute
    z-index: 99
    height: .88rem
    span
      width .88rem
      background-color #000000
      margin 0.2rem 0 0 0.2rem
      background rgba(0,0,0,0.6)
      border-radius 50%
   .mp-header-left
    position absolute
    font-size .36rem
    color #fff
    text-align center
    left 0
    top 0
    width .8rem
    height .88rem
    line-height .88rem
   .mp-header-title
    overflow hidden
    margin 0 1rem
    line-height .88rem
    white-space nowrap
    text-overflow ellipsis
    font-size .32rem
    text-align center
    color: #fff
</style>
